<template>
  <a-modal
    title="系统配置"
    :visible="visible"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-row :gutter="50">
      <a-col :span="12">
        <div class="form-input-material">
          <input
            class="form-control-material"
            placeholder=" "
            v-model="formData.siteName"
          />
          <label>站点名称</label>
        </div>
      </a-col>

      <a-col :span="12">
        <div class="form-input-material">
          <input
            class="form-control-material"
            placeholder=" "
            v-model="formData.diskName"
          />
          <label>存储位置</label>
        </div>
      </a-col>

      <a-col :span="12">
        <div class="form-input-material">
          <input
            class="form-control-material"
            placeholder=" "
            v-model="formData.zipOutName"
          />
          <label>解压位置</label>
        </div>
      </a-col>

      <a-col :span="12">
        <div class="form-input-material">
          <input
            class="form-control-material"
            placeholder=" "
            v-model="formData.previewName"
          />
          <label>预览URL</label>
        </div>
      </a-col>

      <a-col :span="12">
        <div class="form-input-material">
          <input
            class="form-control-material"
            placeholder=" "
            v-model="formData.hostName"
          />
          <label>站点域名</label>
        </div>
      </a-col>

      <a-col :span="12">
        <div class="form-check">
          <label>是否允许系统登陆</label>
          <input
            type="checkbox"
            v-model="formData.roleSwitch"
            class="form-switch"
            :true-value="0"
            :false-value="1"
            id="anime"
            name="hobby"
          />
        </div>
      </a-col>
    </a-row>

    <template slot="footer">
      <a-button
        key="submit"
        type="primary"
        :loading="loading"
        v-if="isChange"
        @click="handleOk"
      >
        修改
      </a-button>
      <a-button key="back" @click="$emit('change', false)"> 取消 </a-button>
      <a-button key="submit" type="primary" @click="handleClearCache">
        清除缓存
      </a-button>
    </template>
  </a-modal>
</template>

<script>
import { getSiteInfo, updateSiteInfo, clearCache } from "@/api/siteInfo";
import { mapActions } from "vuex";
export default {
  props: ["visible"],
  data() {
    return {
      loading: false,
      formData: {},
      oldFormData: {},
      isChange: false
    };
  },
  created() {
    this.getSiteInfo();
  },
  methods: {
    ...mapActions({
      setSiteInfo: "global/setSiteInfo"
    }),
    async handleClearCache() {
      try {
        const { code, msg } = await clearCache();
        if (code === 200) {
          this.$notification.success({
            message: msg
          });
        }
      } catch (error) {}
    },
    async getSiteInfo() {
      try {
        const { code, data } = await getSiteInfo();
        if (code === 200) {
          this.setSiteInfo(data);
          const strData = JSON.stringify(data);
          this.formData = JSON.parse(strData);
          this.oldFormData = JSON.parse(strData);
          this.isChange = false;
        }
      } catch (error) {}
    },
    async handleOk() {
      try {
        const { code, data, msg } = await updateSiteInfo(this.formData);
        if (code === 200) {
          this.getSiteInfo();
          this.$notification.success({
            message: "修改成功，请重启后台项目"
          });
        }
      } catch (error) {}
    },
    handleCancel() {
      this.$emit("change", false);
    }
  },
  model: {
    prop: "visible",
    event: "change"
  },
  watch: {
    formData: {
      deep: true,
      handler(newVal) {
        const newValue = JSON.stringify(newVal);
        const oldValue = JSON.stringify(this.oldFormData);
        if (newValue !== oldValue) {
          this.isChange = true;
        } else {
          this.isChange = false;
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.form-input-material,
.form-check {
  margin: 20px 0 !important;
}
.form-check {
  label {
    margin-right: 10px;
  }
}
</style>
